<template>
  <text :class="clsName" :style="cssText"></text>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

import '@/components/fab-icon/index.css'

type Props = {
  type: string
  light?: boolean
  large?: boolean
  normal?: boolean
  small?: boolean
  size?: string
  color?: string
}

const props = withDefaults(defineProps<Props>(), {
  light: false,
  large: false,
  normal: true,
  small: false
})

const clsName = computed(()=> {
  return [
    'fab-icon',
    `fab-icon-${props.type}`
  ]
})

const cssText = computed(()=> {
  let size:number|string = 0;
  if(props.size) {
    size = props.size
  } else {
    let kind = props.small ? 0 : 1
    if(props.large) {
      kind = 2
    }
    size = (Number(kind) * 26) + 20
  }
  
  let pieces: string[] = [
    
  ]
  if(size > 0) {
    pieces.push(`font-size: ${size}rpx`)
  }
  if(props.light) {
    pieces.push('color: #ffffff')
  } else {
    if(props.color) {
      pieces.push(`color: ${props.color}`)
    }
  }
  return pieces
})
</script>
